<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    #dt {
        width: 1200px;
        height: 800px;
        margin: 20px auto;
        border: 1px solid transparent;
    }
    .anchorBL{
  display: none;
    }
</style>


 <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=uurfG2pAHNwoFjwYkI3D4OpOiPhOr3gV"></script>

<body>
    <div id="dt"></div>
</body>

</html>
<script>

        let map = new BMapGL.Map("dt");
    let point = new BMapGL.Point(114.076153,22.63132)
    map.centerAndZoom(point, 15); 
    map.setTilt(20);  
   map.enableScrollWheelZoom()
   map.setHeading(80)

let one=new BMapGL.Point(114.076025,22.631305)
let two=new BMapGL.Point(114.076214,22.631288)
let three=new BMapGL.Point(114.0762,22.63138)
let four=new BMapGL.Point(114.076052,22.631372)
let five=new BMapGL.Point(114.076025,22.631305)
    let pil=new BMapGL.Polyline([one,two,three,four,five],{
        strokeWeight:'2',
   strokeOpacity: 0.5,
   strokeColor:"black" 
    })
    
map.addOverlay(pil); 
// 添加控件加减
let jiajian=new BMapGL.ZoomControl({
    anchor:BMAP_ANCHOR_BOTTOM_RIGHT
})
map.addControl(jiajian)
// 添加比例尺
let rules=new BMapGL.ScaleControl({
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    offset: new BMapGL.Size(20,20)
})
map.addControl(rules)
// 添加图标
let logo=new BMapGL.Icon('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F38%2F68%2F5926dc0d34cc3_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641983663&t=854dcff375028fd7eed76720b62331b8',new BMapGL.Size(40,20),{
    anchor:new BMapGL.Size(10,20)
})
let fugai=new BMapGL.Marker(new BMapGL.Point(114.076153,22.63132),{
    icon: logo,
        // offset: new BMapGL.Size(30, -20)
})
map.addOverlay(fugai)
// 添加文本
let text=new BMapGL.Label("富豪花园",{
    position:new BMapGL.Point(114.076153,22.63132)
})
text.setStyle({
    width:'60px',
    height:'30px',
    backgroundColor: 'rgba(0,0,0,.3)',
    color:'black',
    border:'1px solid #333'
})
map.addOverlay(text)
</script>

